<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery获取Html元素尺寸</title>
    <style type="text/css">
        .initDiv{
            display: block;
            width: 100px;
            height: 100px;
            margin-left: 200px;
            margin-top: 100px;
            padding: 10px 10px;
            border: 5px solid red;
        }
    </style>
</head>
<body>
    <fieldset>
        <legend>jQuery获取Html元素尺寸</legend>
        <div class="initDiv" id="testDiv">
            我是div1
        </div>
    </fieldset>
</body>

<!--引入jQuery的js文件-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    /**
     * $(function(){
     *      //页面加载完成后的处理，固定写法
     * });
     *
     */
    $(function () {
        console.log("获取元素的高度");
        console.log($("#testDiv").height());    //获取元素的高度
        console.log("获取元素的宽度");
        console.log($("#testDiv").width());     //获取元素的宽度
        console.log("获取元素内部区域高度");
        console.log($("#testDiv").innerHeight());    //获取元素内部区域高度(包括补白、不包括边框)
        console.log("获取元素内部区域宽度");
        console.log($("#testDiv").innerWidth());     //获取元素内部区域宽度(包括补白、不包括边框)
        console.log("获取元素外部高度");
        console.log($("#testDiv").outerHeight());    //获取元素外部高度(默认包括补白和边框)
        console.log("获取元素外部宽度");
        console.log($("#testDiv").outerWidth());     //获取元素外部宽度(默认包括补白和边框)
        console.log("获取元素外部高度");
        console.log($("#testDiv").outerHeight(true));    //为true时包括边距
        console.log("获取元素外部宽度");
        console.log($("#testDiv").outerWidth(true));    //为true时包括边距
    });
    
</script>
</html>